<template>
   <div class="item">
        <div class="swiper-box">
          <span class="btn btn-left el-icon-back"  ref="btnleft" @click="btnLeft"></span>
          
          <div id="view" ref="view" class="view1" >
            <div class="item" v-for="(floorItem,index) in newFloorList" :key="floorItem.id" >
              <img :src="floorItem.goodsImages[0]" />
              <p class="price">&yen;<span>{{floorItem.price}}</span>.9</p>
              <p class="text">{{floorItem.name}}</p>
              <p class="star"><i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i><span>5</span>(3个评论)</p>
              <p class="color ">4色可选</p>
            </div>         
          </div>
          <span class="btn btn-right el-icon-right"  ref="btnright" @click="btnRight"></span>
        </div>
      </div>
</template>

<script>
export default {
  name: 'FloorSwiper',
  data() {
      return {
         floorList:[]
      }
  },
  props: ['index'],
   mounted() {
      	const view = this.$refs.view
        this.getFloorList();
        console.log(this.index)
  },
  methods: {
      //请求数据
      async getFloorList() {
          const result = await this.$API.reqSearchList();
          this.floorList = result.data
      },

    //   按钮点击事件
    btnLeft(event) {
        const view = this.$refs.view
    
      view.style.left = "0vw";
      this.$refs.btnleft.style.opacity = "0";
      this.$refs.btnleft.style.transform = "translateX(-50%)";
      this.$refs.btnleft.style.visibility = "hidden";
      this.$refs.btnright.style.opacity = "1";
      this.$refs.btnright.style.transform = "translateX(0)";
      this.$refs.btnright.style.visibility = "visible";
    },
    btnRight(event) {
        const view = this.$refs.view
      view.style.left = "-32.1vw";
      this.$refs.btnright.style.opacity = "0";
      this.$refs.btnright.style.transform = "translateX(+50%)";
      this.$refs.btnright.style.visibility = "hidden";
      this.$refs.btnleft.style.opacity = "1";
      this.$refs.btnleft.style.transform = "translateX(0)";
      this.$refs.btnleft.style.visibility = "visible";
    },
  },
  computed: {
      newFloorList() {
          if(this.index == 0) {
             return  this.floorList.slice(0,6)
          }else if(this.index == 1) {
             return this.floorList.slice(6,12)
          }else if(this.index == 2) {
             return  this.floorList.slice(12,18)
          }else if(this.index === 4) {
            return  this.floorList.slice(18,24)
          }
      }
  }
}
</script>

<style lang="less" scoped>
  .item {
      .swiper-box {
        height: 35vh;
        width: 64.2vw;
        margin: 3vh auto;
        overflow: hidden;
      }
      .view1 {
        height: 35vh;
        width: 100vw;
        position: relative;
        left: 0;
        transition: left 0.5s ease-out;
      }
      .btn {
        position: absolute;
        cursor: pointer;
        top: 75.5%;
        width: 66px;
        background-color: white;
        font-size: 30px;
        border-radius: 20px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
        text-align: center;
        line-height: 66px;
        transition: all 0.5s ease-out 0.5s;
      }
      .btn-left {
        left: 14vw;
        visibility: hidden;
      }
      .btn-right {
        right: 11.5vw;
      }
      .item {
        margin: 0 10px;
        float: left;
        height: 35vh;
        width: 15vw;
        background-color: white;
        border-radius: 20px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
      }
      img {
        margin: 20px 0 10px 0;
        position: relative;
        left: 16%;
        height: 20vh;
        width: 10vw;
      }
      p {
        margin: 0 10px;
      }
      .price {
        font-weight: 1000;
      }
      .price span {
        font-size: xx-large;
      }
      .text {
        margin-top: 5px;
        font-size: smaller;
        height: 3vh;
        font-weight: bold;
      }
      .star {
        position: relative;
        top: 10px;
        color: rgba(155, 155, 155, 1);
        font-size: xx-small;
        i{
            color: #FFB339;
            font-size: 18px;
        }
      }
      .star span {
        margin: 0 3px;
        font-weight: bolder;
        color: rgba(100, 100, 100, 1);
      }
      .color {
        float: right;
        transform: translateY(-3px);
        color: rgba(155, 155, 155, 1);
        font-size: xx-small;
      }
    }
</style>
